<template>
  <div id="intro">
<!-- profile-->
    <div id="profile">
      <div>
        <img ref="profileImg"
             src="/static/detail/halibote.jpg"
             alt="作者头像"
             :class="{imgwidth:isWidth,imgheight:!isWidth}"
        >
      </div>
      <div>
        <p style="color:#2C3E50;font-size:16px;">{{ authorInfo.name }}</p>
        <p style="color:#818181;">码龄4岁</p>
      </div>
    </div>
<!--motto    -->
    <div id="motto">
      <p><i class="iconfont icon-lizhichaoyue" style="color:#FC4349;"></i>&nbsp;{{ authorInfo.motto }}</p>
    </div>
<!-- states about rank,comment,visit,reading   -->
    <div id="competence">
      <div><p>{{ authorInfo.originalArticleNum }}</p><p>原创</p></div>
      <div><p>1万+</p><p>总排名</p></div>
      <div><p>{{ authorInfo.readNumTotal }}</p><p>阅读</p></div>
      <div><p>18</p><p>评论</p></div>
    </div>
<!-- become his or her fan   -->
    <div id="chat">
      <div><i class="iconfont icon-Asset"></i>私信</div>
      <div><i class="iconfont icon-guanzhu"></i>关注</div>
      <div><i class="iconfont icon-zhichi1"></i>支持</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ConciseIntroduce",
  props:{
    authorInfo:Object
  },
  data(){
    return{
      profileWidth: 54,
      isWidth: true
    }
  },
  mounted() {
    if(this.$refs.profileImg.width>this.$refs.profileImg.height){
      this.isWidth = false
    }
  },
  methods:{

  }
}
</script>

<style scoped>
#intro{
  width:100%;
}

/*profile*/
#profile > div{
  display: inline-block;
  vertical-align: top;
}
#profile > div:first-child{
  position: relative;
  width:54px;
  height:54px;
  overflow: hidden;
}

/* 选较短的边，然后固定该边为54px，并且两边保持比例 */
.imgheight{
  height:54px;
}
.imgwidth{
  width: 54px;
}
#profile > div:last-child{
  height:54px;
}
#profile p{
  height:27px;
  font-size:14px;
  line-height: 27px;
}

/*motto*/
#motto{
  color:#2C3E50;
  width:100%;
}
#motto p{
  width:100%;
  text-align: center;
  line-height: 32px;
  font-size:16px;
  font-style: italic;
}

/*states about rank,comment,visit,reading*/
#competence{
  width:100%;
  display: flex;
  justify-content: space-around;
}
#competence > div{
  width:22%;
}
#competence p{
  width:100%;
  text-align: center;
  line-height:28px;
}
#competence > div >p:first-child{
  color:#FC4349;
}
#competence > div >p:last-child{
  color:#2C3E50;
}

/*become his or her fan*/
#chat{
  display: flex;
  padding:10px 0;
  justify-content: space-around;
}
#chat > div{
  width:32%;

  height:30px;
  line-height: 30px;
  text-align: center;

  background-color: #6DBCDB;
  border-radius: 15px;
  color:white;
  letter-spacing: 6px;
}

</style>
